<template>
    <a-card>
        <div class="search">
            <a-space>
                <a-select v-model:value="searchForm.searchKey" :options="searchForm.options" style="width: 120px"> </a-select>
                <a-input v-model:value.trim="searchForm.searchValue" placeholder="请输入关键字" />
                <a-button type="primary" @click="searchForm.fn_search()">搜索</a-button>
                <a-button type="primary" @click="adddirForm.visible = true">添加</a-button>
            </a-space>
        </div>
        <a-spin :style="spinStyle" :spinning="searchForm.loading">
        <a-table bordered :columns="columns" :data-source="searchForm.dataSource" :pagination="false">
            <template #bodyCell="{ column, record }">
                <template v-if="column.key == 'dirname' || column.key == 'description' || column.key == 'tags'">
                    <a-input v-model:value.trim="record[column.key]" @change="debouncedFn($event, column.key, record.id)" />
                </template>
                <template v-if="column.key == 'action'">
                    <a-button type="link" @click="router.push('imgStoreList/' + record.id)">查看</a-button>
                    <a-button type="link" @click="router.push('imgStoreUpload/' + record.id)">上传</a-button>
                    <a-button type="link" danger @click="delDir(record.id)">删除</a-button>
                </template>
            </template>
        </a-table>
        <a-row justify="center" v-if="searchForm.total > 10" style="margin-top: 10px">
            <a-pagination
                v-model:current="searchForm.page"
                v-model:pageSize="searchForm.size"
                show-quick-jumper
                showSizeChanger
                :total="searchForm.total"
                :page-size-options="pageSizeOptions"
                @change="pageChange"
                :show-total="(total: number) => `总计 ${total} 项`"
            />
        </a-row>
    </a-spin>
        <a-drawer v-model:open="adddirForm.visible" class="custom-class" title="添加目录" placement="right">
            <p>
                目录名
                <a-input
                    v-model:value.trim="adddirForm.dirname"
                    placeholder="目录名只能为数字,字母,下划线!"
                    @onkeyup="adddirForm.dirname = adddirForm.dirname.replace(/[^a-zA-Z0-9_]/g, '')"
                />
            </p>
            <p>描述<a-input v-model:value.trim="adddirForm.description" placeholder="描述" /></p>
            <p>标签<a-input v-model:value.trim="adddirForm.tags" placeholder="tag标签以逗号分隔" /></p>
            <br />
            <a-space>
                <a-button type="primary" @click="adddirForm.fn_submit">确定</a-button>
                <a-button @click="[adddirForm.dirname, adddirForm.description, adddirForm.tags] = ''">取消</a-button>
            </a-space>
        </a-drawer>
    </a-card>
</template>

<script lang="ts" setup>
    import { columns, searchForm, adddirForm } from "@/assets/ts/imgStoreIndex";
    import { dirListApi } from "@/api/imgStore";
    import { message } from "ant-design-vue";
    import { useDebounceFn } from "@vueuse/core"; // 防抖函数
    import { useRouter } from "vue-router";
    import { useSpinLoadingState } from "@/hooks/useCommon";
    const { spinStyle } = useSpinLoadingState();
    const router = useRouter();
    // 获取目录列表
    const pageSizeOptions = ref<string[]>(["10", "20", "50", "100", "500", "1000"]);
    const pageChange = (pageNumber: number) => {
        searchForm.page = pageNumber;
        searchForm.fn_search();
    };
    const visible = ref(false)
    // 删除目录
    const delDir = (id: number) => {
        dirListApi({}, "delete", id)
            .then((res) => {
                searchForm.fn_search();
                message.success("删除成功!");
            })
            .catch((err) => {
                message.error(err);
            });
    };

    // 修改目录信息
    const changeDir = (e: Event, key: string, id: number) => {
        const value = (e.target as HTMLInputElement).value;
        const data = {
            [key]: value
        };
        dirListApi(data, "put", id)
            .then((res) => {
                let { code, msg } = res.data;
                if (code == 200) {
                    searchForm.fn_search();
                    message.success(msg);
                } else {
                    message.error(msg);
                }
            })
            .catch((err) => {
                message.error(err);
            });
    };
    onMounted(() => {
        searchForm.fn_search();
    });
    const debouncedFn = useDebounceFn(changeDir, 1000); // 文件修改防抖
</script>

<style lang="scss" scoped>
    .search {
        margin-bottom: 10px;
    }
</style>
